<template>
    <div class="VonBox">
        <template v-if="!isMultiple">
            <div class="VonBoxTop">
                <ul class="vonBoxUl">
                    <li>条码长度</li>
                    <li>是否对比</li>
                    <li>起始字节</li>
                    <li>对比长度</li>
                    <li>对比内容</li>
                    <!-- <li>操作</li> -->
                </ul>
            </div>
            <div class="VonBoxBottom">
                <ul class="vonBoxUl2" v-for="item in formData1">
                    <li>
                        <VonInput isNumberInput width="60px" v-model="item.barCodeLength" height="20px" :suffix="false"
                            style="margin: 0">
                        </VonInput>
                    </li>
                    <li>
                        <el-checkbox v-model="item.isCompare" style="width: 60px"></el-checkbox>
                    </li>
                    <li>
                        <VonInput width="60px" height="20px" v-model="item.beginText" :suffix="false" style="margin: 0">
                        </VonInput>
                    </li>
                    <li>
                        <VonInput isNumberInput width="60px" height="20px" v-model="item.compareLength" :suffix="false"
                            style="margin: 0">
                        </VonInput>
                    </li>
                    <li>
                        <VonInput width="60px" v-model="item.compareText" height="20px" :suffix="false"
                            style="margin: 0">
                        </VonInput>
                    </li>
                    <!-- <li style="color: indianred">删除</li> -->
                </ul>
            </div>
        </template>
        <template v-if="isMultiple">
            <div class="VonBoxTop">
                <ul class="vonBoxUl">
                    <li>物料名称</li>
                    <li>物料码长度</li>
                    <li>是否对比</li>
                    <li>起始字节</li>
                    <li>对比长度</li>
                    <li>对比内容</li>
                    <li>操作</li>
                </ul>
            </div>
            <div class="VonBoxBottom VonBoxBottomScroll">
                <ul class="vonBoxUl2" v-for="(item,index) in formData12" :key="index">
                    <li>
                        <VonSelect width="60px" :options="options" v-model="item.materialId" height="20px"
                            :suffix="false" style="margin-top:14px;width: 80px">
                        </VonSelect>
                    </li>
                    <li>
                        <VonInput isNumberInput width="60px" v-model="item.barCodeLength" height="20px" :suffix="false"
                            style="margin: 0">
                        </VonInput>
                    </li>
                    <li>
                        <el-checkbox v-model="item.isCompare" style="width: 60px"></el-checkbox>
                    </li>
                    <li>
                        <VonInput width="60px" height="20px" v-model="item.beginText" :suffix="false" style="margin: 0">
                        </VonInput>
                    </li>
                    <li>
                        <VonInput isNumberInput width="60px" height="20px" v-model="item.compareLength" :suffix="false"
                            style="margin: 0">
                        </VonInput>
                    </li>
                    <li>
                        <VonInput width="60px" v-model="item.compareText" height="20px" :suffix="false"
                            style="margin: 0">
                        </VonInput>
                    </li>
                    <li style="color: indianred;cursor: pointer" @click="deleteParams(index)">删除</li>
                </ul>
                <el-row class="addButton">
                    <el-button @click="addTableData"> <i class="el-icon-plus" style="margin: 0 10px"></i>增加一行数据
                    </el-button>
                </el-row>
            </div>
        </template>
    </div>
</template>

<script>
    export default {
        name: "VonBox",
        data() {
            return {
                options: [{
                    id: '',
                    name: ''
                }],
                formData1: [{
                    barCodeLength: '',
                    isCompare: false,
                    beginText: '',
                    compareLength: '',
                    compareText: ''
                }],
                formData12: [{
                    materialId: '',
                    barCodeLength: '',
                    isCompare: false,
                    beginText: '',
                    compareLength: '',
                    compareText: ''
                }, ]
            }
        },
        methods: {
            deleteParams(preIndex) {
                const arr = [...this.formData12];
                let newArr = arr.filter((item, index) => {
                    return preIndex != index;
                })
                this.formData12 = newArr;
            },
            addTableData() {
                const arr = [...this.formData12];
                arr.push({
                    materialId: '',
                    barCodeLength: '',
                    isCompare: false,
                    beginText: '',
                    compareLength: '',
                    compareText: ''
                });
                this.formData12 = arr;
            }
        },
        props: {
            isMultiple: {
                type: Boolean,
                default: false
            }
        }
    }
</script>

<style scoped lang="scss">
    .VonBox {
        .VonBoxTop {
            width: 100%;
            height: 30px;
            line-height: 30px;
            margin-top: 10px;
            color: white;
            background: rgba(143, 163, 204, .2);

            .vonBoxUl {
                display: flex;
                justify-content: space-evenly;

                li {
                    list-style: none;
                    font-size: 14px;
                    text-align: center;
                }
            }
        }

        .VonBoxBottom {
            width: 100%;
            height: 40px;
            line-height: 40px;
            margin-top: 10px;
            color: white;
            background: transparent;

            .vonBoxUl {
                display: flex;
                justify-content: space-evenly;

                li {
                    list-style: none;
                    height: 14px;
                    text-align: center;
                }
            }

            .vonBoxUl2 {
                height: 60px;
                line-height: 60px;
                margin-bottom: 20px;
                display: flex;
                justify-content: space-evenly;

                li {
                    list-style: none;
                    height: 14px;
                    text-align: center;
                }
            }

            .addButton {
                margin-top: 40px;
                width: 100%;
                height: 83px;
                line-height: 60px;
                text-align: center;

                .el-button {
                    padding: 0;
                    width: 786px;
                    height: 30px;
                    line-height: 30px;
                    background: transparent;
                    border: 1px dashed #E6EEFF;
                    border-radius: 2px;
                    color: white;
                }
            }
        }

        .VonBoxBottomScroll {
            height: 540px;
            overflow-y: scroll;

        }
    }
</style>